import CustomInput from '@/components/antd-comp/input/CustomInput'
import { showMessage } from '@/components/antd-comp/message'
import CustomSelect from '@/components/antd-comp/select/CustomSelect'
import {
  CommonSmallAdddButton,
  CommonSmallErrorTitle,
  CommonSmallSvg
} from '@/pages/workflow/components/CommonSmallTemp'
import { INPUT_CONSTRAINTS } from '@/pages/workflow/components/InspectData'
import { ifElseTypeOptions, variableSourceTypeOptions } from '@/pages/workflow/constants'
import { useSourceOptions } from '@/pages/workflow/hooks/use-source-options'
import { generateUUIDv4 } from '@/util/utils'
import { Select } from 'antd'
import { useEffect, useState } from 'react'
import '../index.less'

/**
 * 输入模块配置对象。
 *
 * @property {Object} info - 数据对象，包含与输入模块相关的所有数据。
 * @property {Function} editData - 修改功能函数，用于更新或编辑 `info` 中的数据。
 * @property type - 新增 默认显示 存在不显示
 * @property {number} index - 当前数据在列表中的索引位置。
 */
export default function IfCont({ info, sourceOptions, editData, type = '', index }) {
  /* list */
  const [optionList, setOptionList] = useState([])
  const { options } = useSourceOptions(info)

  useEffect(() => {
    if (Array.isArray(info.inputList) && info.inputList.length > 0) {
      const newList = info.inputList.map(item => ({
        ...item,
        variable: item.variable ? item.variable : undefined,
        value: item.value ? item.value : undefined,
        conditions: item.conditions ? item.conditions : undefined
      }))

      setOptionList(newList)
    } else {
      setOptionList([])
    }
  }, [info.inputList])

  const delOption = i => {
    const newList = [...optionList]
    newList.splice(i, 1)
    setOptionList(newList)
    editData({
      inputList: newList,
      index
    })
  }

  const addOption = () => {
    if (optionList.length === INPUT_CONSTRAINTS.IFELSE_CONT) {
      showMessage({
        content: '节点总数限制为' + INPUT_CONSTRAINTS.IFELSE_CONT,
        type: 'warning'
      })
      return
    }
    // 添加新项
    const newInputList = [
      ...optionList,
      {
        variable: undefined,
        conditions: undefined,
        value: undefined,
        value_selector: [],
        type: 'cite',
        id: generateUUIDv4()
      }
    ]
    setOptionList(newInputList)

    editData({
      inputList: newInputList,
      index
    })
  }

  return (
    <div className="flexCol InputCont_case">
      {/* options */}
      {optionList.map((item, i) => (
        <div key={i} className="flexRowStart flexRowJustBet InputCont_marTop">
          <div className="flexRowStart flexRowJustBet w-[95%]">
            <Select
              value={item.variable}
              placeholder="请选择"
              placement="bottomLeft"
              style={{ pointerEvents: 'auto' }}
              className="w-[25%]"
              onChange={e => {
                const newList = optionList.map((obj, index) => {
                  if (index === i && e) {
                    return { ...obj, variable: e }
                  }
                  return obj
                })
                setOptionList(newList)
                editData({
                  inputList: newList,
                  index
                })
              }}
              options={options}
            ></Select>
            <CustomSelect
              className="w-[30%]"
              onChange={e => {
                const newList = optionList.map((obj, index) => {
                  if (index === i) {
                    return {
                      ...obj,
                      conditions: e,
                      type: e === 'is_empty' || e === 'is_not_empty' ? 'input' : obj.type,
                      value: e === 'is_empty' || e === 'is_not_empty' ? 'empty' : obj.value === 'empty' ? '' : obj.value
                    }
                  }
                  return obj
                })
                setOptionList(newList)
                editData({
                  inputList: newList,
                  index
                })
              }}
              value={item.conditions}
              options={ifElseTypeOptions}
              placeholder="选择条件"
            />
            <CustomSelect
              disabled={item.conditions === 'is_empty' || item.conditions === 'is_not_empty'}
              className="w-[20%]"
              onChange={e => {
                const newList = optionList.map((obj, index) => {
                  if (index === i) {
                    return { ...obj, type: e, value: undefined, value_selector: undefined }
                  }
                  return obj
                })
                setOptionList(newList)
                editData({
                  inputList: newList,
                  index
                })
              }}
              value={item.type}
              options={variableSourceTypeOptions}
              placeholder="参数来源"
            />
            {item.type === 'cite' ? (
              <Select
                value={item.value}
                defaultValue={item.value}
                placeholder="请选择"
                placement="bottomLeft"
                style={{ pointerEvents: 'auto' }}
                className="w-[25%]"
                onChange={e => {
                  const newList = optionList.map((obj, index) => {
                    if (index === i && e) {
                      return { ...obj, value: e, value_selector: e.split(',') }
                    }
                    return obj
                  })
                  setOptionList(newList)
                  editData({
                    inputList: newList,
                    index
                  })
                }}
                options={options}
              ></Select>
            ) : (
              <CustomInput
                disabled={item.conditions === 'is_empty' || item.conditions === 'is_not_empty'}
                placeholder="输入参数值"
                onChange={e => {
                  const newList = optionList.map((obj, index) => {
                    if (index === i) {
                      return { ...obj, value: e.target.value }
                    }
                    return obj
                  })
                  setOptionList(newList)
                  editData({
                    inputList: newList,
                    index
                  })
                }}
                maxLength={INPUT_CONSTRAINTS.DESCRIPTION_MAX_LENGTH}
                value={item.value}
                className="w-[25%]"
              />
            )}
          </div>
          {i > 0 && <CommonSmallSvg delOption={delOption} i={i}></CommonSmallSvg>}
        </div>
      ))}
      {/* 提示信息 */}
      <CommonSmallErrorTitle
        optionList={optionList}
        noneList={['value', 'variable', 'type', 'conditions']}
      ></CommonSmallErrorTitle>
      {/* 新增 */}
      {!type && <CommonSmallAdddButton addOption={addOption}></CommonSmallAdddButton>}
    </div>
  )
}
